<template>
  <div class="panel">
    <VCM :contextMenuData="contextMenuData" @setTop="test" @setHidden="test"></VCM>
    <div class="panel-header">
      <b>工作台及应用选择</b>
    </div><!--panel-header-->
    <div class="panel-body">
      <div class="collapse">
        <!-- <pre>{{platform_app.workBenchList}}</pre> -->
        <!-- <pre>{{platform_app.expandPid}}</pre> -->
        <!-- <pre>{{platform_app.activePid}}</pre> -->
        <!-- <pre>{{platform_app.activeApp}}</pre> -->
        <template v-for="workBench in arrApp">
          <h3 :key="'t_'+workBench.id" :class="workBench.className">
            <div class="title btn text-overflow" @click="激活平台(workBench.id)">
              {{ workBench.name }}
              <el-badge class="badge" v-if="workBench.unread > 0" :value="workBench.unread" :max="999"></el-badge>
            </div>
            <div class="fun">
              <span class="btn btn-blue" @click="setHiddenAll(workBench.id)">恢复</span>
              <span class="fc-gray60">隐藏{{ workBench.numHide }}</span>
            </div>
            <el-button type="text" class="btnAtR" @click="折叠平台(workBench.id)"
              :icon="workBench.isOpen?'el-icon-arrow-down':'el-icon-arrow-right'">
            </el-button>
          </h3>
          <ul :key="'a_'+workBench.id" :class="{'collapse-panel':true,'isOpen':workBench.isOpen}">
            <template v-for="(appItem,i) in workBench.list">
              <li :key="i" v-show="appItem.isHidden" :class="appItem.className"
                @contextmenu.prevent="showRightMenu($event,appItem)">
                <div class="main btn" @click="激活应用(appItem)">
                  <el-image class="icon" :src="appItem.icon" fit="cover"></el-image>
                  <div class="title text-overflow">
                    {{ appItem.name }}
                  </div>
                </div>
                <el-badge class="badge" :value="appItem.unread" :max="999"
                  v-if="appItem.unread > 0">
                  <!-- 原有的!workBenchItem.isIncludes条件忘了是怎么回事了 -->
                </el-badge>
              </li>
            </template>
          </ul>
        </template>
        <el-button type="" @click="test">test</el-button>
      </div>
    </div><!--panel-body-->
    <div class="panel-footer">
    </div>
    
  </div><!--panel-->
</template>
<script>
// import { wsMsgFromCus,isSameApp } from './1_AreaApp/1_AreaApp.js';
import { mapState, mapMutations } from 'vuex';


export default {
  components: {
    'VCM': () => { return import('@/assets/vueContextMenu.vue') },
  },
  computed: {
    ...mapState([
      'resetParams',
      'platform_app',
    ]),
    arrApp: function () {
      let base = _.cloneDeep(this.platform_app.workBenchList);
      let arrOpen = this.platform_app.expandPid;// 被展开的列表，复选
      let uCheckedPid = this.platform_app.activePid;// 被选中的列表，唯一
      return base.map((workBenches)=>{
        let isChecked,isOpen;
        workBenches.isChecked = isChecked = workBenches.id == uCheckedPid;
        workBenches.isOpen = isOpen = arrOpen.includes(workBenches.id);
        workBenches.className = {
          'collapse-title':true,
          'isOpen':isOpen,
          'active':isChecked,
        };
        workBenches.list = workBenches.list.map((app)=>{
          let isActive,noAgent;
          app.isActive = isActive = this.$store.getters['platform_app/isSameApp'](app);
          app.noAgent = noAgent = false;//好像之前有用权限限制过，后来又解除了这个限制
          app.className = {
            item:true,
            isActive:isActive,
            isTop:app.isTop,
            noAgent:noAgent,
          }
          return app;
        })
        return workBenches
      })
    },
  },
  data() {
    return {
      d:0,
      isDev: process.env.NODE_ENV == 'development',
      contextMenuData: {
        menuName: 'appList',
        axis: { x: null, y: null },
        menulists: [
          {
            fnHandler: 'setTop',
            icoName: 'fa fa-fw fa-arrow-up',
            btnName: '置顶'
          },
          {
            fnHandler: 'setHidden',
            icoName: 'fa fa-fw fa-leaf',
            btnName: '隐藏'
          },
          {
            btnName: '只写了格式，没写对应功能'
          },
        ],
      }
    }
  },
  watch: {
    resetParams:function(nv,ov){
      console.log(nv,ov);
      // this.$store.commit('platform_app/激活平台',{pid:''})
      // this.$store.commit('platform_app/激活应用',{app:{}})
    },
  },
  methods: {
    test:function(item){
      console.log('%c [item ]-127', 'font-size:13px; background:pink; color:#bf2c9f;', item)
      let a = this.$store.getters['platform_app/getActivePlatform']();
      let b = this.$store.getters['platform_app/getActiveApp']();
      console.log(a,b)
    },
    setHiddenAll:function(){},
    激活平台:function(pid){
      this.$store.commit('platform_app/激活平台',{pid})
    },
    折叠平台:function(pid){
      this.$store.commit('platform_app/折叠平台',{pid})
    },
    激活应用:function(appItem){
      this.$store.commit('platform_app/激活应用',{app:appItem})
    },
    updataUnread:function(pid,aid,nUnread){
      this.$store.commit('platform_app/updataUnread',{pid,aid,nUnread})
    },
    showRightMenu:function($event,appItem){
      console.log('%c [ $event,appItem ]-145', 'font-size:13px; background:pink; color:#bf2c9f;', $event,appItem)
      this.contextMenuData.axis.x = $event.clientX;
      this.contextMenuData.axis.y = $event.clientY;
      let m2 = {
        fnHandler: 'setTop',
        icoName: 'fa fa-fw fa-arrow-up',
        btnName: appItem.isTop ? '取消置顶' : '置顶'
      }
      this.contextMenuData.menulists.splice(0,1,m2)
      $event.preventDefault()
    },
  },
  mounted: function () {
  },
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import url('./index.less');
</style>